<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <%- include ../taglibs/layout_head.ejs%>
    <%- include ../taglibs/layout.css.ejs%>
    <link href="js/plugins/zTree/css/metroStyle/metroStyle.css" rel="stylesheet">
    <link href="plugins/bootstrap-icheck/skins/flat/red.css" rel="stylesheet">
</head>
<body>
<%-include("../taglibs/header.ejs",{params:{className:"active",dataIsActive:"true"}})%>
<div class="nav-body" id="divContent">
    <div class="nav-box">
        <div class="row">
            <div class="col-sm-4 col-md-3 col-lg-2 nav-box-left-box">
                <%-include("dataManageLeftMenu.ejs",{params:{className:"active",accountManage:"true"}})%>
            </div>
            <div class="col-sm-6 col-md-9 col-lg-10 right-container-box">
                <div class="right-container">
                    <div class="row">
                        <div class="col-sm-12">
                            <a class="back-view" id="back-view">
                                <i class="fa fa-chevron-left fa-back-left"></i>
                                返回
                            </a>
                        </div>
                    </div>
                    <section class="content content-table">
                        <div style="display: block">
                            <ol class="head-breadcrumb">
                                <li>
                                    <a>账号管理</a>
                                </li>
                                <li class="active">
                                    <%=titleTxt%>
                                </li>
                            </ol>
                            <div class="form-content">
                                <form class="form-horizontal form-validBox" id="userInfoForm">
                                    <input type="text" hidden="hidden" id="id" name="id">
                                    <input type="text" hidden="hidden" id="deptId" name="deptId">
                                    <input type="text" hidden="hidden" id="memo" name="memo">
                                    <input type="text" hidden="hidden" id="realUserType" name="realUserType" value="0">
                                    <div class="form-group">
                                        <label for="last" class="col-sm-2  control-label label-require">所属用户：</label>
                                        <div class="col-sm-3">
                                            <input type="text" class="form-control" id="deptName" name="deptName" readonly="readonly" style="padding-right: 54px">
                                            <button type="button" class="btn btn-theme selectUser"
                                                    style="position: absolute;top: 0px;right: 15px;">选择</button>
                                        </div>
                                        <label for="role" class="col-sm-2  control-label ">角色类型：</label>
                                        <div class="col-sm-3">
                                            <select type="text" class="form-control" id="roleId" name="roleId">
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="loginName" class="col-sm-2  control-label label-require">账号：</label>
                                        <div class="col-sm-3">
                                            <input type="text" class="form-control" id="loginName" name="loginName">
                                        </div>
                                        <!--<label for="startDate" class="col-sm-2  control-label">启用时间：</label>
                                        <div class="col-sm-3">
                                            <input type="text" class="form-control" id="startDate" name="startDate">
                                        </div>-->
                                        <label for="password" class="col-sm-2  control-label label-require">密码：</label>
                                        <div class="col-sm-3">
                                            <input type="text" class="form-control" id="password" name="password">
                                        </div>
                                    </div>
                                    <!--<div class="form-group">

                                        <label for="endDate" class="col-sm-2  control-label">到期时间：</label>
                                        <div class="col-sm-3">
                                            <input type="text" class="form-control" id="endDate" >
                                        </div>
                                    </div>-->
                                    <div class="form-group">
                                        <label for="loginPass" class="col-sm-2  control-label label-require">确认密码：</label>
                                        <div class="col-sm-3">
                                            <input type="text" class="form-control" id="loginPass" name="loginPass">
                                        </div>
                                        <label for="name" class="col-sm-2  control-label">账号操作人：</label>
                                        <div class="col-sm-3">
                                            <input type="text" class="form-control" id="name" name="name">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="depts" class="col-sm-2  control-label label-require">关注分组：</label>
                                        <div class="col-sm-3">
                                            <input type="text" class="form-control" id="depts" name="depts" readonly="readonly" style="padding-right: 54px">
                                            <button type="button" class="btn btn-theme selectUserObject"
                                                    style="position: absolute;top: 0px;right: 15px;">选择</button>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="userType" class="col-sm-3  control-label label-require">是否允许APP用户修改车辆信息：</label>
                                        <div class="col-sm-3" style="font-size: 16px;height: 34px;line-height: 28px;">
                                            <input name="userType" type="radio" id="ableUserType" data-size="small" style="height: 34px;" value="1">是
                                            <input name="userType" type="radio" id="disableUserType" data-size="small" style="height: 34px;" value="0" >否
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-12" style="text-align: center">
                                            <button type="button" id="submitAccountForm" class="btn btn-round btn-theme" style="width:220px">保 存</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="myTreeDialog">
    <div class="modal-dialog" style="width: 320px;">
        <div class="modal-content" style="width: 320px;">
            <div class="modal-header">
                <button type="button" class="close" onclick="closeTreeDialog()">×</button>
                <h4 class="modal-title" id="NoPermissionModalLabel">所属上级</h4>
            </div>
            <div class="modal-body" style="height:320px;max-height:320px;max-width: 320px;
                overflow: auto;">
                <ul id="userCommonTree" class="ztree">
                </ul>
            </div>
            <div class="modal-footer">
                <button class="btn btn-info"   type="button" onclick="getAllCheckNodes()">确 定</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="myTreeObjectDialog">
    <div class="modal-dialog" style="width: 320px;">
        <div class="modal-content" style="width: 320px;">
            <div class="modal-header">
                <button type="button" class="close" onclick="closeObjectTreeDialog()">×</button>
                <h4 class="modal-title" id="NoPermissionModalLabel">所属上级</h4>
            </div>
            <div class="modal-body" style="height:320px;max-height:320px;max-width: 320px;
                overflow: auto;">
                <ul id="userObjectCommonTree" class="ztree">
                </ul>
            </div>
            <div class="modal-footer">
                <button class="btn btn-info"   type="button" onclick="getAllCheckNodesObj()">确 定</button>
            </div>
        </div>
    </div>
</div>
<%-include ../taglibs/layout.js.ejs%>
<script src="/js/plugins/zTree/js/jquery.ztree.all-3.5.js"></script>
<script src="/js/plugins/zTree/js/jquery.ztree.exhide-3.5.js"></script>
<!--<script src="/js/ztree/ztree-cus-table.js"></script>-->
<script src="/js/ztree/ztree-cus-check.js"></script>
<script src="/js/ztree/ztree-user.js"></script>
<script type="text/javascript" src="/plugins/bootstrap-icheck/icheck.min.js"></script>
<script type="text/javascript" src="js/viewpage/dataManage/dataManage.js"></script>
<script type="text/javascript" src="js/viewpage/dataManage/account/account.js"></script>
<script type="text/javascript">
    var url = '/tree/dept';
    var _id='<%=id%>';
    $(function () {
        AccountInfo.initEditUserPage();
        UserTreeComponents.initUserTree('id', 'parentId', 'name',clickTree,treeCheck, "radio");
        UserTreeComponents.loadUserTree(url,"userCommonTree");
        UserTreeObjectComponents.initUserTree('id', 'parentId', 'name',clickTree,treeCheck, "checkbox");
        UserTreeObjectComponents.loadUserTree(url,"userObjectCommonTree");
        queryRoleType();
        $('#ableUserType').iCheck({
            checkboxClass: 'icheckbox_flat-red',
            radioClass: 'iradio_flat-red'
        });
        $('#disableUserType').iCheck({
            checkboxClass: 'icheckbox_flat-red',
            radioClass: 'iradio_flat-red'
        });
        $('#ableUserType').on('ifChecked', function(event){
            $("#realUserType").val($(this).val());
        });
        $('#disableUserType').on('ifChecked', function(event){
            $("#realUserType").val($(this).val());
        });
        $('#disableUserType').iCheck('check');
        if(_id){
            $("#id").val(_id);
            queryAccountInfo();
        }

    })
    function clickTree(event, treeId, treeNode) {
//        debugger;
//        var flag=treeNode.checked;
//        tree_Obj.checkNode(treeNode, true, true);
//        selectTreeNode(treeNode);
    }
    function treeCheck(event, treeId, treeNode, clickFlag) {

    }
    function closeTreeDialog() {
        $("#myTreeDialog").modal("hide");
    }
    function closeObjectTreeDialog() {
        $("#myTreeObjectDialog").modal("hide");
    }
    function getAllCheckNodes() {
        var node = userTreeObj.getCheckedNodes(true)[0];
        if(node){
            $("#deptName").val(node.name);
            $("#deptId").val(node.id);
        }else{
            $("#deptName").val("");
            $("#deptId").val("");
        }
        closeTreeDialog();
    }

    function getAllCheckNodesObj() {
        var node = userTreeObject.getCheckedNodes(true);
        if(node && node.length){
            var deptIds = [],
                deptNames = [];
            for(var i=0,
                    _len=node.length;i<_len;i++){
                if(node[i].id !== 1){
                    deptIds.push(node[i].id);
                    deptNames.push(node[i].name)
                }
            }
           // $("#deptId").val(node[1].id);
            $("#depts").val(deptNames.toString());
            $("#memo").val(deptIds.toString())
        }else{
//            $("#deptName").val("");
//            $("#deptId").val("");
            $("#depts").val("");
            $("#memo").val("")
        }
        closeObjectTreeDialog();
    }
    
    function queryRoleType() {
        $.ajax({
            type: "POST",
            url: "/editAccountInfo/queryRoleType",
            async: false,
            dataType: "json",
            success: function (data) {
               if(data.rows && data.rows.length){
                    var _rows = data.rows;
                    for(var m=0;m<_rows.length;m++){
                        var _row = _rows[m];
                        $("#roleId").append("<option value='"+_row["id"]+"'>"+_row["roleName"]+"</option>")
                    }
               }
            }
        });
    }
    function queryAccountInfo() {
        $.ajax({
            url:"/editAccountInfo/queryAccountInfo",
            type:"POST",
            data:{id:_id},
            dataType:"json"
        }).done(function (result) {
            if(result.isSuccess === true){
                var data = result.data;
                for(var k in data){
                    $("#userInfoForm").find("[name='"+k+"']").val(data[k]);
                }
                $("#password").val(data["loginPass"]);
                $("#roleId option[value='"+data[k]+"']").attr("selected","selected");
                $("#realUserType").val(data["userType"]);
                if(data["userType"] == "1"){
                    $('#ableUserType').iCheck('check')
                }else{
                    $('#disableUserType').iCheck('check')
                }
                var _nodes = userTreeObj.getNodesByParam("id",data["id"], null)
                userTreeObj.checkNode(_nodes[0], true, true);
                var memos = data["memo"] ? data["memo"].split(",") : [];
               // var nodes = userTreeObj.getNodes();
                if(memos && memos.length){
                    for(var i=0;i<memos.length;i++){
                        var memoItem = memos[i];
                        var nodes = userTreeObject.getNodesByParam("id",memoItem, null)
                        userTreeObject.checkNode(nodes[0], true, true);
                    }
                }
            }
        })
    }
</script>
</body>
</html>